<template>
	<transition	name="move">
		<div class="food" v-show="showFlag" ref="food">
			<div class="food-content">
				<div class="image-header">
					<img :src="food.image">
					<div class="back" @click="hide" ref="back" v-show="showAbs">
						<i class="icon-arrow_lift"></i>
					</div>
					<div class="fixed" @click="hide"  ref="fixed" v-show="!showAbs">
						<i class="icon-arrow_lift" ref="fixedIcon"></i>
						商品详情
					</div>
				</div>
				<div class="content">
					<h1 class="title">{{food.name}}</h1>
					<div class="detail">
						<span class="sell-count">月售{{food.sellCount}}份</span>
						<span class="rating">好评率{{food.rating}}%</span>
					</div>
					<div class="price">
						<span class="new">￥{{food.price}}</span>
						<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wrapper">
						<cartcontrol :food="food" @cartAdd="foodAdd"></cartcontrol>
					</div>
					<div 
					    class="buy"
					    v-show="!food.count || food.count===0"
					    @click="addFirst($event)"
					>
						加入购物车
				    </div>
				</div>
				<split v-show="food.info"></split>
				<div class="info" v-show="food.info">
					<h1 class="title">商品信息</h1>
					<p class="text">{{food.info}}</p>
				</div>
				<split></split>
				<div class="rating">
					<h1 class="title">商品评价</h1>
					<ratingselect 
					           :selectType="selectType" 
					           :onlyContent="onlyContent" 
					           :desc="desc"
					           :ratings="food.ratings"
					           @select="selectRating"
					           @toggle="toggleContent"
					></ratingselect>
				</div>
				<div class="rating-wrapper">
					<ul v-show="food.ratings && food.ratings.length">
						<li v-for="(rating,index) of food.ratings"
						    :key="index"
						    class="rating-item border-bottom"
						    v-show="needShow(rating.rateType,rating.text)"
						>
							<div class="user">
								<span class="name">{{rating.username}}</span>
								<img :src="rating.avatar" class="avatar" width="12" height="12">
							</div>
							<div class="time">{{rating.rateTime | formatDate}}</div>
							<p class="text">
								<span :class="{'icon-thumb_up':rating.rateType === 0,'icon-thumb_down':rating.rateType === 1}"></span>
								{{rating.text}}
							</p>
						</li>
					</ul>
					<div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评论</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import BScroll from 'better-scroll'
	import Vue from 'vue'
	import {formatDate} from 'common/js/date'
	import cartcontrol from 'components/cartcontrol/cartcontrol'
	import split from 'components/split/split'
	import ratingselect from 'components/ratingselect/ratingselect'

    const POSITIVE = 0;
	const NEGATIVE = 1;
	const ALL = 2;

	export default {
		name: 'food',
		props: {
			food: {
				type: Object
			}
		},
		data() {
			return {
				showFlag: false,
				selectType: ALL,
				onlyContent: true,
				showAbs: true,
				desc: {
					all: '全部',
					positive: '推荐',
					negative: '吐槽'
				},
				scrollY: 0
			}
		},
		watch: {
			scrollY(newY) {
				let opacity = 0;
				
				if(newY > 60) {
					let opacity = newY /150
					opacity = opacity >1 ? 1 : opacity
					this.$refs.fixed.style.opacity=opacity;
					this.showAbs = false;
					let paddingT= newY
					this.$refs.fixed.style.paddingTop= `${paddingT}px`;
					this.$refs.fixedIcon.style.paddingTop= `${paddingT}px`;
					
				}
				else {
					this.showAbs = true;
					this.paddingT = 0
				}
				
			}
		},
		methods:{
			show() {
				this.showFlag = true;
				this.selectType = ALL;
				this.onlyContent = false;
				this.$nextTick(() => {
					this._initScroll();
				})
			},
			_initScroll() {
				if(!this.scroll) {
						this.scroll = new BScroll(this.$refs.food,{probeType: 3,click:true});
						this.scroll.on('scroll',(pos)=>{
			    		if(pos.y <= 0){
			    			this.scrollY =Math.abs(Math.round(pos.y));
			    	    }
			    	})
					}
					else{
						this.scroll.refresh();
				}
			},
			hide() {
				this.showFlag = false;
			},
			addFirst(event) {
				//  this.$emit('cartAdd',event.target);
				Vue.set(this.food,'count',1)
			},
			foodAdd() {
				this.$emit('cartAdd',event.target);
			},
			selectRating(type) {
				this.selectType = type;
				this.$nextTick (() => {
					this.scroll.refresh();
				})
			},
			toggleContent() {
				this.onlyContent = !this.onlyContent;
				this.$nextTick(()=> {
					this.scroll.refresh();
				})
			},
			needShow(type,text) {
				if(this.onlyContent && !text){
					return false;
				}
				if(this.selectType === ALL) {
					return true
				}
				else{
					return type === this.selectType
				}
			},
		},
		filters: {
			formatDate(time) {
				let date= new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		components: {
			cartcontrol,
			split,
			ratingselect
		}
		
	}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/varibles.styl'
@import '~common/stylus/mixin.styl'

	.food
		position fixed
		left 0
		top 0
		bottom 48px
		z-index 30
		width 100%
		background #fff
		transform: translate3d(0, 0, 0)
		&.move-enter-active,&.move-leave-active
			transition all 0.2s linear
		&.move-enter,&.move-leave-to
			transform: translate3d(100%, 0, 0)
		.image-header
			position relative
			width 100%
			height 0
			padding-top 100%
			img
				position absolute
				top 0
				left 0
				width 100%
				height 100%
			.back
				position absolute
				left 20px
				top 20px
				width 40px
				height 40px
				border-radius 20px
				background rgba(0,0,0,0.8)
				text-align center
				line-height 40px
				.icon-arrow_lift
					display block
					padding 10px
					font-size 20px
					color #fff
			.fixed
				position fixed
				z-index 10
				top 0
				left 0
				right 0
				height 40px
				line-height 40px
				text-align center
				color #fff
				background #141d27
				font-size 16px
				.icon-arrow_lift
					position absolute
					top 0
					left 0
					width 32px
					text-align center
					line-height 40px
					font-size 20px
					color #fff
		.content
			padding 18px
			position relative
			.title
				line-height 14px
				margin-bottom 8px
				font-size 14px
				font-weight 700
				color $themeColor
			.detail
				margin-bottom 18px
				line-height 10px
				height 10px
				font-size 0
				.sell-count,.rating
					font-size 10px
					color $bgColor
				.sell-count
					margin-right 12px
			.price
				font-weight 700
				line-height 24px
				.new
					margin-right 18px
					font-size 14px
					color $activeColor
				.old
					text-decoration line-through
					font-size 10px
					color $bgColor
			.cartcontrol-wrapper
				position absolute
				right 12px
				bottom 12px
			.buy
				position absolute
				right 18px
				bottom 18px
				z-index 10
				height 24px
				line-height 24px
				padding 0 12px
				box-sizing border-box
				font-size 10px
				border-radius 12px
				color #fff
				background rgb(0,160,220)		
		.info	
			padding 18px
			.title
				line-height 14px
				margin-bottom 6px
				font-size 14px
				color $themeColor
				font-weight 700
			.text
				padding 0 8px
				line-height 24px
				font-size 12px
				color rgb(77,83,93)		
		.rating
			padding-top 18px
			.title
				line-height 14px
				margin-left 18px
				font-size 14px
				color $themeColor
				font-weight 700	
		.rating-wrapper
			padding 0 18px
			.rating-item
				position relative
				padding 16px 0
				border-bottom(rgba(7,17,27,0.1))
				&:last-child
					border-none()
				.user
					position absolute
					right 0
					top 16px
					line-height 12px
					font-size 0
					.name
						display inline-block
						margin-right 6px
						vertical-align top
						font-size 10px
						color $bgColor
					.avatar
						border-radius 50%
				.time
					margin-bottom 6px
					line-height 12px
					font-size 10px
					color $bgColor
				.text
					line-height 16px
					font-size 12px
					color $themeColor
					.icon-thumb_up,.icon-thumb_down
						line-height 24px
						margin-right 4px
						font-size 12px
					.icon-thumb_up
						color rgb(0,160,220)
					.icon-thumb_down
						color $bgColor
			.no-rating
				padding 16px 0
				font-size 12px
				color $bgColor		
				
</style>